<template>
  <div class="dashboard-container">
    <div class="dashboard-text">国家林业数据统计可视化平台</div>
    <!-- 引入echarts -->
    <div class="chart-container">
      <div id="chart" class="chart" style="height: calc(75vh); width: 100%" />
    </div>

    
    <div class="chinamap-settingTool">
      <el-select
        v-model="year"
        placeholder="请选择年份"
        @change="selectChange()"
      >
        <el-option
          v-for="item in years"
          :key="item"
          :label="item + '年'"
          :value="item"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="visualItem"
        placeholder="请选择统计项"
        @change="selectChange()"
      >
        <el-option
          v-for="item in visualItems"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>


<script>
import { mapGetters } from "vuex";
import { loadBMap } from "@/utils/map";
import dataApi from "@/api/data";

export default {
  name: "Dashboard",
  data() {
    return {
      chart: null,
      maxValue: 1000,
      minValue: 0,
      visualItem: "森林覆盖率",
      year: "2013",
      dataList: [],
      items: [],
      visualItems: [
        "森林覆盖率",
        "林地面积",
        "森林面积",
        "人工林面积",
        "天然林面积",
        "活立木总蓄积",
        "人工林蓄积",
        "天然林蓄积",
        "乔木林单位面积蓄积量",
      ],
      years: ["2013", "2014", "2015", "2016", "2017", "2018"],
    };
  },
  mounted() {
    // 在DOM
    this.$nextTick(() => {
      loadBMap("D19qfIlsnlt3hXZQ226041j39LtQ6Voh").then(() => {
        dataApi.getData().then((res) => {
          this.items = res.data.items;
          this.getDataList(this.items);
          this.maxValue = this.getMax();
          this.minValue = this.getMin();
          this.initchart();
        });
      });
    });
  },
  methods: {
    resizeChart() {
      this.chart.resize({
        width: document.body.width,
        height: document.body.height,
      });
    },
    selectChange() {
      this.items = [];
      this.dataList = [];
      this.$nextTick(() => {
        loadBMap("D19qfIlsnlt3hXZQ226041j39LtQ6Voh").then(() => {
          dataApi.getData().then((res) => {
            this.items = res.data.items;
            this.getDataList(this.items);
            this.maxValue = this.getMax();
            this.minValue = this.getMin();
            this.initchart();
          });
        });
      });
    },
    getMax() {
      var max = Number.MIN_VALUE;
      for (let i = 0; i < this.dataList.length; i++) {
        max =
          Number(this.dataList[i].value) > max
            ? Number(this.dataList[i].value)
            : max;
      }
      return max;
    },
    getMin() {
      var min = Number.MAX_VALUE;
      for (let i = 0; i < this.dataList.length; i++) {
        min =
          Number(this.dataList[i].value) < min
            ? Number(this.dataList[i].value)
            : min;
      }
      return min;
    },
    getDataList() {
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i]["年份"] === this.year) {
          this.dataList.push({
            name: this.items[i].city.replace(/\s+/g, ""),
            value: Number(this.items[i][this.visualItem]),
          });
        }
      }
      //console.log(this.dataList);
    },
    initchart() {
      this.chart = this.$echarts.init(document.getElementById("chart"));
      this.setChart();
      window.addEventListener("resize", () => {
        this.resizeChart();
      });
    },
    setChart() {
      var that = this;
      var option = {
        title: {
          text: this.visualItem + "统计 " + this.year + " 年",
          subtext: "国家林草局统计年鉴",
          sublink: "#",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          showDelay: 0,
          transitionDuration: 0.2,
          formatter: function (params) {
            //保留整数
            //var value = (params.value + '').split('.');
            //value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
            if (that.visualItem.match("率") != null) {
              return (
                params.seriesName +
                "<br/>" +
                params.name +
                ": " +
                params.value +
                "%"
              );
            } else if (that.visualItem.match("面积") != null) {
              return (
                params.seriesName +
                "<br/>" +
                params.name +
                ": " +
                params.value +
                "万公顷"
              );
            } else if (that.visualItem.match("蓄积") != null) {
              return (
                params.seriesName +
                "<br/>" +
                params.name +
                ": " +
                params.value +
                "立方米/公顷"
              );
            } else {
              return (
                params.seriesName + "<br/>" + params.name + ": " + params.value
              );
            }
          },
        },
        visualMap: {
          min: this.getMin() * 0.8,
          max: this.getMax() * 1.2,
          left: "left",
          top: "bottom",
          text: ["高", "低"],
          inRange: {
            color: ["orangered", "yellow", "green"],
          },
          calculable: true,
          show: true,
        },
        geo: {
          map: "china",
          roam: false,
          zoom: 1.23,
          label: {
            normal: {
              show: true,
              fontSize: "10",
              color: "rgba(0,0,0,0.7)",
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              areaColor: "#F3B329",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            name: this.visualItem,
            type: "map",
            geoIndex: 0,
            data: this.dataList,
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
  computed: {
    ...mapGetters(["name"]),
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    color: rgb(2, 27, 63);
    font-size: 30px;
    line-height: 46px;
  }
}
.chinamap-settingTool {
  position: absolute;
  right:100px;
  top:50px;
  z-index:auto
}
</style>
